<template name="skeleton">
  <view class="sk-container">
    <view is="pages/index/components/IndexNavbar">
      <view class="navbar IndexNavbar--navbar" style="padding-top:47px">
        <view class="logo IndexNavbar--logo">
          <image class="logo-image IndexNavbar--logo-image sk-image"></image>
          <text class="sk-transparent sk-text-3-5714-188 sk-text">便捷 | 亲民 | 美味</text>
        </view>
        <view class="search IndexNavbar--search">
          <view class="ipt IndexNavbar--ipt sk-image" placeholder="请输入搜索内容" type="text"></view>
        </view>
      </view>
    </view>
    <scroll-view :scroll-y="true" class="scroll-view scroll-view" refresher-enabled="true">
      <view is="pages/index/components/IndexSwiper">
        <view class="carousel IndexSwiper--carousel">
          <swiper :circular="true" :interval="3000" :current="0" :autoplay="false">
            <swiper-item style="position: absolute; width: 100%; height: 100%; transform: translate(0%, 0px) translateZ(0px);">
              <navigator class="navigator IndexSwiper--navigator" hover-class="none">
                <image class="image IndexSwiper--image sk-image" mode="aspectFill"></image>
              </navigator>
            </swiper-item>
          </swiper>
          <view class="indicator IndexSwiper--indicator">
            <text class="dot IndexSwiper--dot active IndexSwiper--active"></text>
            <text class="dot IndexSwiper--dot"></text>
            <text class="dot IndexSwiper--dot"></text>
          </view>
        </view>
      </view>
      <view is="pages/index/components/IndexHot">
        <view class="hot IndexHot--hot">
          <view class="hot-item IndexHot--hot-item">
            <view class="title IndexHot--title">
              <text class="title-text IndexHot--title-text sk-transparent sk-text-14-2857-723 sk-text">特惠推荐</text>
              <text class="title-desc IndexHot--title-desc sk-transparent sk-text-14-2857-145 sk-text">精选全攻略</text>
            </view>
            <navigator class="cards IndexHot--cards" hover-class="none">
              <image class="image IndexHot--image sk-image" mode="aspectFit"></image>
              <image class="image IndexHot--image sk-image" mode="aspectFit"></image>
            </navigator>
          </view>
          <view class="hot-item IndexHot--hot-item">
            <view class="title IndexHot--title">
              <text class="title-text IndexHot--title-text sk-transparent sk-text-14-2857-631 sk-text">特惠推荐</text>
              <text class="title-desc IndexHot--title-desc sk-transparent sk-text-14-2857-543 sk-text">精选全攻略</text>
            </view>
            <navigator class="cards IndexHot--cards" hover-class="none">
              <image class="image IndexHot--image sk-image" mode="aspectFit"></image>
              <image class="image IndexHot--image sk-image" mode="aspectFit"></image>
            </navigator>
          </view>
          <view class="hot-item IndexHot--hot-item">
            <view class="title IndexHot--title">
              <text class="title-text IndexHot--title-text sk-transparent sk-text-14-2857-274 sk-text">特惠推荐</text>
              <text class="title-desc IndexHot--title-desc sk-transparent sk-text-14-2857-4 sk-text">精选全攻略</text>
            </view>
            <navigator class="cards IndexHot--cards" hover-class="none">
              <image class="image IndexHot--image sk-image" mode="aspectFit"></image>
              <image class="image IndexHot--image sk-image" mode="aspectFit"></image>
            </navigator>
          </view>
          <view class="hot-item IndexHot--hot-item">
            <view class="title IndexHot--title">
              <text class="title-text IndexHot--title-text sk-transparent sk-text-14-2857-988 sk-text">特惠推荐</text>
              <text class="title-desc IndexHot--title-desc sk-transparent sk-text-14-2857-557 sk-text">精选全攻略</text>
            </view>
            <navigator class="cards IndexHot--cards" hover-class="none">
              <image class="image IndexHot--image sk-image" mode="aspectFit"></image>
              <image class="image IndexHot--image sk-image" mode="aspectFit"></image>
            </navigator>
          </view>
        </view>
      </view>
      <view is="pages/index/components/IndexShop">
        <view class="shop IndexShop--shop">
          <navigator class="shop-item IndexShop--shop-item">
            <view class="img IndexShop--img">
              <image class="image IndexShop--image sk-image" mode="aspectFit"></image>
            </view>
            <view class="content IndexShop--content">
              <view class="name IndexShop--name sk-transparent sk-text-20-0000-847 sk-text">古茗</view>
              <view class="notice IndexShop--notice sk-transparent sk-text-20-8333-334 sk-text">店铺公告：每天喝不腻，赐福有心意！古茗轻乳茶系列携手《天官赐福》</view>
              <view class="price IndexShop--price">
                <view class="startPrice IndexShop--startPrice sk-transparent">起送价:
                  <text class="sk-transparent sk-text-20-8333-894 sk-text">15元</text>
                </view>
                <view class="endPrice IndexShop--endPrice sk-transparent">配送价:
                  <text class="sk-transparent sk-text-20-8333-432 sk-text">0元</text>
                </view>
              </view>
            </view>
          </navigator>
          <navigator class="shop-item IndexShop--shop-item">
            <view class="img IndexShop--img">
              <image class="image IndexShop--image sk-image" mode="aspectFit"></image>
            </view>
            <view class="content IndexShop--content">
              <view class="name IndexShop--name sk-transparent sk-text-20-0000-950 sk-text">书亦烧仙草</view>
              <view class="notice IndexShop--notice sk-transparent sk-text-20-8333-495 sk-text">店铺公告：大自然赋予的绿色、健康，手作现萃，精心调制，一杯奶茶在手，可与朋友作半日谈。</view>
              <view class="price IndexShop--price">
                <view class="startPrice IndexShop--startPrice sk-transparent">起送价:
                  <text class="sk-transparent sk-text-20-8333-556 sk-text">16元</text>
                </view>
                <view class="endPrice IndexShop--endPrice sk-transparent">配送价:
                  <text class="sk-transparent sk-text-20-8333-148 sk-text">2元</text>
                </view>
              </view>
            </view>
          </navigator>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<style>
.sk-transparent {
  color: transparent !important;
}
.sk-text-3-5714-908 {
  background-image: linear-gradient(
    transparent 3.5714%,
    #eeeeee 0%,
    #eeeeee 96.4286%,
    transparent 0%
  ) !important;
  background-size: 100% 28rpx;
  position: relative !important;
}
.sk-text {
  background-origin: content-box !important;
  background-clip: content-box !important;
  background-color: transparent !important;
  color: transparent !important;
  background-repeat: repeat-y !important;
}
.sk-text-14-2857-822 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 44.8rpx;
  position: relative !important;
}
.sk-text-14-2857-54 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 33.6rpx;
  position: relative !important;
}
.sk-text-14-2857-806 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 44.8rpx;
  position: relative !important;
}
.sk-text-14-2857-676 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 33.6rpx;
  position: relative !important;
}
.sk-text-14-2857-647 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 44.8rpx;
  position: relative !important;
}
.sk-text-14-2857-920 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 33.6rpx;
  position: relative !important;
}
.sk-text-14-2857-465 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 44.8rpx;
  position: relative !important;
}
.sk-text-14-2857-186 {
  background-image: linear-gradient(
    transparent 14.2857%,
    #eeeeee 0%,
    #eeeeee 85.7143%,
    transparent 0%
  ) !important;
  background-size: 100% 33.6rpx;
  position: relative !important;
}
.sk-text-20-6897-677 {
  background-image: linear-gradient(
    transparent 20.6897%,
    #eeeeee 0%,
    #eeeeee 79.3103%,
    transparent 0%
  ) !important;
  background-size: 100% 58rpx;
  position: relative !important;
}
.sk-text-20-8333-865 {
  background-image: linear-gradient(
    transparent 20.8333%,
    #eeeeee 0%,
    #eeeeee 79.1667%,
    transparent 0%
  ) !important;
  background-size: 100% 48rpx;
  position: relative !important;
}
.sk-text-20-8333-713 {
  background-image: linear-gradient(
    transparent 20.8333%,
    #eeeeee 0%,
    #eeeeee 79.1667%,
    transparent 0%
  ) !important;
  background-size: 100% 48rpx;
  position: relative !important;
}
.sk-text-20-6897-481 {
  background-image: linear-gradient(
    transparent 20.6897%,
    #eeeeee 0%,
    #eeeeee 79.3103%,
    transparent 0%
  ) !important;
  background-size: 100% 58rpx;
  position: relative !important;
}
.sk-text-20-8333-71 {
  background-image: linear-gradient(
    transparent 20.8333%,
    #eeeeee 0%,
    #eeeeee 79.1667%,
    transparent 0%
  ) !important;
  background-size: 100% 48rpx;
  position: relative !important;
}
.sk-text-20-8333-556 {
  background-image: linear-gradient(
    transparent 20.8333%,
    #eeeeee 0%,
    #eeeeee 79.1667%,
    transparent 0%
  ) !important;
  background-size: 100% 48rpx;
  position: relative !important;
}
.sk-image {
  background: #efefef !important;
}
.sk-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: transparent;
}
</style>
